<template>
    <div>
        <template v-if="form.words != ''">
            <h2>討論區</h2>
            <h3>搜尋結果</h3>
            <h4>沒有任何貼文</h4>
        </template>
        <p>請在下方一個或多個欄位中輸入你要搜尋的字串</p>
        <el-form :model="form" label-width="35%">
            <el-form-item label="這些字可以出現在貼文的任何位置">
                <el-input v-model="form.words" />
            </el-form-item>
            <el-form-item label="字串要完全符合">
                <el-input v-model="form.phrase" />
            </el-form-item>
            <el-form-item label="不要包括這些字">
                <el-input v-model="form.notwords" />
            </el-form-item>
            <el-form-item label="這些字要被視為一個完整的字句">
                <el-input v-model="form.fullwords" />
            </el-form-item>
            <el-form-item label="貼文必須在此日期之後">
                <el-checkbox value="1" v-model="form.timefromrestrict" />
                <el-date-picker :disabled="form.timefromrestrict != '1'" v-model="form.dateAfter" type="datetime" format="YYYY/MM/DD HH:mm" />
            </el-form-item>
            <el-form-item label="貼文必須在此日期之後">
                <el-checkbox value="1" v-model="form.timetorestrict" />
                <el-date-picker :disabled="form.timetorestrict != '1'" v-model="form.dateBefore" type="datetime" format="YYYY/MM/DD HH:mm" />
            </el-form-item>
            <el-form-item label="挑選你要搜尋的討論區">
                <el-select v-model="form.forumid" style="width: 240px">
                    <el-option label="所有討論區" value="all" />
                    <el-option v-for="forum in forumList" :key="forum.value" :label="forum.label" :value="forum.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="這些字要出現在主旨中">
                <el-input v-model="form.subject" />
            </el-form-item>
            <el-form-item label="這個名字要與作者符合">
                <el-input v-model="form.user" />
            </el-form-item>
            <el-form-item label="Search starred discussions only">
                <el-checkbox value="1" v-model="form.starredonly" />
            </el-form-item>
            <el-form-item label="被標籤為">
                <el-select v-model="form.tag" placeholder="輸入標籤..." clearable multiple>
                    <el-option v-for="item in tagList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <div class="btn-list">
                <el-button @click="submitHandle" color="#F06423">搜尋討論區</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'

import moment from 'moment'

const route = useRoute()

const form = reactive({
    words: '' as any,
    phrase: '',
    notwords: '',
    fullwords: '',
    timefromrestrict: '0',
    dateAfter: moment('2020/01/01 00:00'),
    timetorestrict: '0',
    dateBefore: new Date(),
    forumid: 'all',
    subject: '',
    user: '',
    starredonly: '0',
    tag: '',
})
const forumList = ref([{ label: 'Site announcements', value: 5 }])
const tagList = ref([{ label: '标签1', value: '1' }])
const submitHandle = () => {}

onMounted(() => {
    form.words = route.query.searchKey || ''
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

h3 {
    margin-bottom: 18px;
    font-size: 26px;
    color: #000;
    font-weight: normal;
    line-height: 1.2;
}

h4 {
    margin-bottom: 18px;
    font-size: 20px;
    color: #000;
    font-weight: normal;
    line-height: 1.2;
}

p {
    margin-bottom: 20px;
    font-size: 15px;
    color: #4c4c4c;
}

.el-form {
    .el-form-item {
        border-top: 1px solid #dee2e6;
        margin: 0;
        padding: 15px 0;
        background-color: #f2f2f2;

        &:nth-child(2n) {
            background-color: #fff;
        }

        &:last-child {
            border-bottom: 1px solid #dee2e6;
        }
    }

    .btn-list {
        margin-top: 15px;
        display: flex;
        justify-content: center;
    }
}
</style>
